<template>
    <div>
     	<div class="flex homePage_title justify_cen align_center">
			<span :class="radio==1?'homePage_titleActive':''" @click="chose_i(1)">消息</span>|
			<span :class="radio==2?'homePage_titleActive':''" @click="chose_i(2)">关注</span>
		</div>
		<div class="flex homePage_title justify_cen align_center" style="opacity: 0;">
			<span :class="radio==1?'homePage_titleActive':''" @click="chose_i(1)">消息</span>|
			<span :class="radio==2?'homePage_titleActive':''" @click="chose_i(2)">关注</span>
		</div>
     	
    </div>
</template>

<script>
    export default {
        data: function(){
            return {
                radio:'1',
                height:0,
            }
        },
        mounted(){
        	this.height = document.body.offsetHeight;
        },
        methods: {
           chose_i(val){
           	this.radio=val;
           }
        }
    }
</script>

<style scoped>
    .xiaoxi1{
    	text-align: center;
	    color: #1c1c1c;
	    font-size: 1.6rem;
	    line-height: 1.6rem;
	    padding: 3% 0;
	    border-bottom: 1px solid #e7e9ee;
    }
    .xiaoxi2{
    	width: 95%;
    	padding: 2% 2.5%;
    	border-bottom: 1px solid #f2f2f2;
    }
    .xiaoxi2_img{
    	width: 5rem;
    	height: 5rem;
    	margin-right: 4%;
    	position: relative;
    	
    }
    .xiaoxi2_img p{
    	position: absolute;
    	z-index: 1;
    	background: #ff4242;
    	color: #fff;
    	border-radius: 50px;
    	font-size: 1.2rem;
    	width: 1.5rem;
    	height: 1.5rem;
    	text-align: center;
    	line-height: 1.5rem;
    	top:0;
    	right: 0;
    	transform: translate(30%,-30%);
    	
    }
    .xiaoxi2_img img{
    	width: 5rem;
    	height: 5rem;
    	object-fit:cover;
    	display: block;
    }
    .xiaoxi2_d1{
    	height: 2.5rem;
    	line-height: 2.5rem;
    }
    .xiaoxi2_p1{
    	font-size: 1.3rem;
    	color: #4a4a4a;
    	overflow: hidden;
    	text-overflow: ellipsis;
    	white-space: nowrap;
    }
    .xiaoxi2_p2{
    	color: #cccccc;
    	font-size: 1.2rem;
    }
    .xiaoxi2_d2{
    	height: 2.5rem;
    	line-height: 2.5rem;
    	color: #cccccc;
    	width: 100%;
    	font-size: 1.2rem;
    	overflow: hidden;
    	text-overflow: ellipsis;
    	white-space: nowrap;
    }
    .homePage_title {
		width: 100%;
		padding: 1% 0;
		position: fixed;
		top: 0;
		left: 0;
		background: #fff;
		color: #cecece;
		font-size: 1.5rem;
	}
	
	.homePage_title span {
		color: #505050;
		font-size: 1.5rem;
		margin: 0 3%;
		padding: 4px 0;
	}
	
	.homePage_titleActive {
		font-size: 1.5rem !important;
		color: #b042ff !important;
		position: relative;
	}
</style>
<style>
	
</style>